<template>
  <div class="app-container">
    <div class="custom_card_0">
      <el-form
        ref="queryForm"
        :inline="true"
        label-width="68px"
        style="display: flex; flex-wrap: wrap"
      >
        <el-form-item label="车型名称" prop="pickUpStoreName">
          <el-input
            v-model="queryParams.carModelName"
            clearable
            style="width: 220px"
            placeholder="请输入车型名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="发起日期" prop="pickUpStoreName">
          <el-date-picker
            v-model="queryParams.alltime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :value-format="'yyyy-MM-dd'"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="状态" prop="storeId">
          <el-select
            v-model="queryParams.workStatus"
            placeholder="请选择状态"
            clearable
            size="small"
            filterable
            remote>
            <el-option
              v-for="(item, i) in status"
              :key="item.key"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="工单号" prop="">
          <el-input
            v-model="queryParams.priceNo"
            clearable
            style="width: 220px"
            placeholder="请输入工单号"
          ></el-input>
        </el-form-item>

        <el-form-item label="同步日期" prop="pickUpStoreName">
          <el-date-picker
            v-model="queryParams.alltime2"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :value-format="'yyyy-MM-dd'"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item style="margin-left: auto">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="search"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="reset"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="table-box">
      <!-- <el-button type="primary" size="mini" @click="add">手动调价</el-button> -->
      <el-table
        v-loading="loading"
        max-height="400px"
        :data="list"
        border
        :header-cell-style="{ background: '#F5F7FA' }"
      >
        <el-table-column label="工单号" align="center" prop="priceNo">
          <template slot-scope="{ row }">
            <span
              @click="showPrice(row)"
              style="color: skyblue; cursor: pointer"
              >{{ row.priceNo }}</span
            >
          </template>
        </el-table-column>

        <el-table-column label="车型" align="center" prop="carModelName">
        </el-table-column>

        <el-table-column label="工单状态" align="center" prop="workStatus">
          <template slot-scope="{ row }">
            {{
              row.workStatus == 1
                ? "待执行"
                : row.workStatus == 2
                ? "已执行"
                : row.workStatus == 3
                ? "部分失败"
                : "-"
            }} </template
          >
        </el-table-column>

        <el-table-column
          align="center"
          v-for="(item, index) in ota_order_resource"
          :label="item.dictLabel"
          :key="index"
        >
          <template slot-scope="{ row }">
            {{
              item.dictValue == "xc"
                ? status2text(row.xcStatus)
                : item.dictValue == "hl"
                ? status2text(row.hlStatus)
                : item.dictValue == "wk"
                ? status2text(row.wkStatus)
                : item.dictValue == "zzc"
                ? status2text(row.zzcStatus)
                : item.dictValue == "at"
                ? status2text(row.atStatus)
                : item.dictValue == "fz"
                ? status2text(row.fzStatus)
                : ""
            }}
            <!-- <el-popover placement="right" width="auto" trigger="hover" v-if='(  item.dictValue == "xc"
                ? status2text(row.xcStatus)
                : item.dictValue == "hl"
                ? status2text(row.hlStatus)
                : item.dictValue == "wk"
                ? status2text(row.wkStatus)
                : item.dictValue == "zzc"
                ? status2text(row.zzcStatus)
                : item.dictValue == "at" 
                ? status2text(row.atStatus)
                : item.dictValue == "fz"
                ? status2text(row.fzStatus)
                : "") != "-"'>
              <div>
                <p v-if="item.dictValue == 'xc'">
                  <div>
                  <p v-for="item2,index2 in price2text(row.xcConfigDto.priceCalendarlist)" :key="index2">
                  {{ item2 }}
                  </p>
                </div>
                  <p>车辆押金：{{ row.xcConfigDto.deposit }},
                  违章押金：{{ row.xcConfigDto.violationDeposit }}</p>

                </p>
                <p v-if="item.dictValue == 'hl'">
                  {{
                    `<p>周内：${row.hlWeekdayPrice}元</p>价格：${row.hlWeekendPrice}元，违章押金：${row.hlViolationDeposit}元，车辆押金：${row.hlCarDeposit}元 `
                  }}
                </p>
                <p v-if="item.dictValue == 'wk'">
                  {{
                    `周内价格：${row.wkWeekdayPrice}元，周末价格：${row.wkWeekendPrice}元，违章押金：${row.wkViolationDeposit}元，车辆押金：${row.wkCarDeposit}元 `
                  }}
                </p>
                <p v-if="item.dictValue == 'zzc'">
                  {{
                    `周内价格：${row.zzcWeekdayPrice}元，周末价格：${row.zzcWeekendPrice}元，违章押金：${row.zzcViolationDeposit}元，车辆押金：${row.zzcCarDeposit}元 `
                  }}
                </p>
                <p v-if="item.dictValue == 'at'">
                  {{
                    `周内价格：${row.atWeekdayPrice}元，周末价格：${row.atWeekendPrice}元，违章押金：${row.atViolationDeposit}元，车辆押金：${row.atCarDeposit}元 `
                  }}
                </p>
                <p v-if="item.dictValue == 'fz'">
                  {{
                    `周内价格：${row.fzWeekdayPrice}元，周末价格：${row.fzWeekendPrice}元，违章押金：${row.fzViolationDeposit}元，车辆押金：${row.fzCarDeposit}元 `
                  }}
                </p>
              </div>
              <el-button slot="reference" type="text" size="mini"
                >&nbsp;<i class="el-icon-warning-outline"></i
              ></el-button>
            </el-popover> -->
          </template>
        </el-table-column>

        <el-table-column label="发起时间" align="center" prop="createTime">
        </el-table-column>
        <el-table-column label="完成时间" align="center" prop="updateTime">
        </el-table-column>
        <el-table-column label="发起人" align="center" prop="userName">
        </el-table-column>
        <el-table-column label="操作" align="center"> </el-table-column>
      </el-table>
    </div>

    <el-drawer
      size="38%"
      :title="'执行详情'"
      :visible.sync="drawer"
      :direction="'rtl'"
      :before-close="handleClose"
    >
      <div class="drawer-box">
        <div class="car_name">工单号：{{ details.no }}</div>
        <div class="car_name">车型：{{ details.car_name }}</div>
        <div class="car_name">状态：  {{
              details.status == 1
                ? "待执行"
                : details.status == 2
                ? "已执行"
                : details.status == 3
                ? "部分失败"
                : "-"
            }}</div>
        <div style="margin-top: 36px">
          <el-card class="box-card" v-if="details.xcConfigDto">
            <div slot="header" class="clearfix">
              <span>携程</span><span style="margin-left: 18px">{{ status2text(details.xcStatus) }}</span>
              <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
            </div>
            <div class="text item">
              <!-- <div v-for="o in details.xcConfigDto.priceCalendarlist" :key="o" style="width: 33.33%;">  -->
              <el-row>
                <el-col
                  :span="8"
                  style="box-sizing: border-box; padding-left: 10px"
                >
                  车辆押金：{{ details.xcConfigDto.deposit }}元
                </el-col>
                <el-col
                  :span="8"
                  style="box-sizing: border-box; padding-left: 10px"
                >
                  违章押金：{{ details.xcConfigDto.violationDeposit }}元
                </el-col>
              </el-row>
              <el-row
                v-for="(item, index) in arr2arr2(
                  details.xcConfigDto.priceCalendarlist
                )"
                :key="index"
                style="margin-top: 22px"
              >
                <el-col
                  :span="8"
                  style="box-sizing: border-box; padding-left: 10px"
                  v-for="(item2, index2) in item"
                  :key="index2"
                >
                  {{ index2 == "0" ? item2.info : item2.info2 }}
                </el-col>
              </el-row>

              <el-row
                v-for="(item, index) in arr2arr(
                  details.xcConfigDto.priceCalendarlist
                )"
                :key="index"
                style="margin-top: 22px"
              >
                <el-col
                  :span="8"
                  style="box-sizing: border-box; padding-left: 10px"
                  v-for="(item2, index2) in item"
                  :key="index2"
                >
                  {{
                    item2.priceType == 1
                      ? item2.info
                      : `${item2.priceName}：${item2.pricePerDay}元/天`
                  }}
                </el-col>
              </el-row>

              <!-- </div> -->
            </div>
          </el-card>

          <el-card class="box-card" v-if="details.hlConfigDto">
            <div slot="header" class="clearfix">
              <span>哈罗</span><span style="margin-left: 18px">{{ status2text(details.hlStatus) }}</span>
              <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
            </div>
            <div class="text item">
              <!-- <div v-for="o in details.xcConfigDto.priceCalendarlist" :key="o" style="width: 33.33%;">  -->
              <el-row>
                <el-col
                  :span="8"
                  style="box-sizing: border-box; padding-left: 10px"
                >
                  车辆押金：{{ details.hlConfigDto.deposit }}元
                </el-col>
                <el-col
                  :span="8"
                  style="box-sizing: border-box; padding-left: 10px"
                >
                  违章押金：{{ details.hlConfigDto.violationDeposit }}元
                </el-col>
              </el-row>
              <el-row
                v-for="(item, index) in arr2arr2(
                  details.hlConfigDto.priceCalendarlist
                )"
                :key="index"
                style="margin-top: 22px"
              >
                <el-col
                  :span="8"
                  style="box-sizing: border-box; padding-left: 10px"
                  v-for="(item2, index2) in item"
                  :key="index2"
                >
                  {{ index2 == "0" ? item2.info : item2.info2 }}
                </el-col>
              </el-row>
              <el-row
                v-for="(item, index) in arr2arr(
                  details.hlConfigDto.priceCalendarlist
                )"
                :key="index"
                style="margin-top: 22px"
              >
                <el-col
                  :span="8"
                  style="box-sizing: border-box; padding-left: 10px"
                  v-for="(item2, index2) in item"
                  :key="index2"
                >
                  {{
                    item2.priceType == 1
                      ? `周内：${item2.pricePerDay},周末：${item2.priceWeekend}`
                      : `${item2.priceName}：${item2.pricePerDay}元/天`
                  }}
                </el-col>
              </el-row>

              <!-- </div> -->
            </div>
          </el-card>

          <el-card class="box-card" v-if="details.wkConfigDto">
            <div slot="header" class="clearfix">
              <span>悟空</span><span style="margin-left: 18px">{{ status2text(details.wkStatus) }}</span>
              <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
            </div>
            <div class="text item">
              <!-- <div v-for="o in details.xcConfigDto.priceCalendarlist" :key="o" style="width: 33.33%;">  -->
              <el-row>
                <el-col
                  :span="8"
                  style="box-sizing: border-box; padding-left: 10px"
                >
                  车辆押金：{{ details.wkConfigDto.deposit }}元
                </el-col>
                <el-col
                  :span="8"
                  style="box-sizing: border-box; padding-left: 10px"
                >
                  违章押金：{{ details.wkConfigDto.violationDeposit }}元
                </el-col>
              </el-row>
              <el-row
                v-for="(item, index) in arr2arr2(
                  details.wkConfigDto.priceCalendarlist
                )"
                :key="index"
                style="margin-top: 22px"
              >
                <el-col
                  :span="8"
                  style="box-sizing: border-box; padding-left: 10px"
                  v-for="(item2, index2) in item"
                  :key="index2"
                >
                  {{ index2 == "0" ? item2.info : item2.info2 }}
                </el-col>
              </el-row>
              <el-row
                v-for="(item, index) in arr2arr(
                  details.wkConfigDto.priceCalendarlist
                )"
                :key="index"
                style="margin-top: 22px"
              >
                <el-col
                  :span="8"
                  style="box-sizing: border-box; padding-left: 10px"
                  v-for="(item2, index2) in item"
                  :key="index2"
                >
                  {{
                    item2.priceType == 1
                      ? `周内：${item2.pricePerDay},周末：${item2.priceWeekend}`
                      : `${item2.priceName}：${item2.pricePerDay}元/天`
                  }}
                </el-col>
              </el-row>

              <!-- </div> -->
            </div>
          </el-card>

          <el-card class="box-card" v-if="details.atConfigDto">
            <div slot="header" class="clearfix">
              <span>凹凸</span><span style="margin-left: 18px">{{ status2text(details.atStatus) }}</span>
              <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
            </div>
            <div class="text item">
              <!-- <div v-for="o in details.xcConfigDto.priceCalendarlist" :key="o" style="width: 33.33%;">  -->
              <el-row>
                <el-col
                  :span="8"
                  style="box-sizing: border-box; padding-left: 10px"
                >
                  车辆押金：{{ details.atConfigDto.deposit }}元
                </el-col>
                <el-col
                  :span="8"
                  style="box-sizing: border-box; padding-left: 10px"
                >
                  违章押金：{{ details.atConfigDto.violationDeposit }}元
                </el-col>
              </el-row>
              <el-row
                v-for="(item, index) in arr2arr2(
                  details.atConfigDto.priceCalendarlist
                )"
                :key="index"
                style="margin-top: 22px"
              >
                <el-col
                  :span="8"
                  style="box-sizing: border-box; padding-left: 10px"
                  v-for="(item2, index2) in item"
                  :key="index2"
                >
                  {{ index2 == "0" ? item2.info : item2.info2 }}
                </el-col>
              </el-row>
              <el-row
                v-for="(item, index) in arr2arr(
                  details.atConfigDto.priceCalendarlist
                )"
                :key="index"
                style="margin-top: 22px"
              >
                <el-col
                  :span="8"
                  style="box-sizing: border-box; padding-left: 10px"
                  v-for="(item2, index2) in item"
                  :key="index2"
                >
                  {{
                    item2.priceType == 1
                      ? `周内：${item2.pricePerDay},周末：${item2.priceWeekend}`
                      : `${item2.priceName}：${item2.pricePerDay}元/天`
                  }}
                </el-col>
              </el-row>

              <!-- </div> -->
            </div>
          </el-card>

          <el-card class="box-card" v-if="details.fzConfigDto">
            <div slot="header" class="clearfix">
              <span>飞猪</span><span style="margin-left: 18px">{{ status2text(details.fzStatus) }}</span>
              <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
            </div>
            <div class="text item">
              <!-- <div v-for="o in details.xcConfigDto.priceCalendarlist" :key="o" style="width: 33.33%;">  -->
              <el-row>
                <el-col
                  :span="8"
                  style="box-sizing: border-box; padding-left: 10px"
                >
                  车辆押金：{{ details.fzConfigDto.deposit }}元
                </el-col>
                <el-col
                  :span="8"
                  style="box-sizing: border-box; padding-left: 10px"
                >
                  违章押金：{{ details.fzConfigDto.violationDeposit }}元
                </el-col>
              </el-row>
              <el-row
                v-for="(item, index) in arr2arr2(
                  details.fzConfigDto.priceCalendarlist
                )"
                :key="index"
                style="margin-top: 22px"
              >
                <el-col
                  :span="8"
                  style="box-sizing: border-box; padding-left: 10px"
                  v-for="(item2, index2) in item"
                  :key="index2"
                >
                  {{ index2 == "0" ? item2.info : item2.info2 }}
                </el-col>
              </el-row>
              <el-row
                v-for="(item, index) in arr2arr(
                  details.fzConfigDto.priceCalendarlist
                )"
                :key="index"
                style="margin-top: 22px"
              >
                <el-col
                  :span="8"
                  style="box-sizing: border-box; padding-left: 10px"
                  v-for="(item2, index2) in item"
                  :key="index2"
                >
                  {{
                    item2.priceType == 1
                      ? `周内：${item2.pricePerDay},周末：${item2.priceWeekend}`
                      : `${item2.priceName}：${item2.pricePerDay}元/天`
                  }}
                </el-col>
              </el-row>

              <!-- </div> -->
            </div>
          </el-card>

          <el-card class="box-card" v-if="details.zzcConfigDto">
            <div slot="header" class="clearfix">
              <span>租租车</span><span style="margin-left: 18px">{{ status2text(details.zzcStatus) }}</span>
              <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
            </div>
            <div class="text item">
              <!-- <div v-for="o in details.xcConfigDto.priceCalendarlist" :key="o" style="width: 33.33%;">  -->
              <el-row>
                <el-col
                  :span="8"
                  style="box-sizing: border-box; padding-left: 10px"
                >
                  车辆押金：{{ details.zzcConfigDto.deposit }}元
                </el-col>
                <el-col
                  :span="8"
                  style="box-sizing: border-box; padding-left: 10px"
                >
                  违章押金：{{ details.zzcConfigDto.violationDeposit }}元
                </el-col>
              </el-row>
              <el-row
                v-for="(item, index) in arr2arr2(
                  details.zzcConfigDto.priceCalendarlist
                )"
                :key="index"
                style="margin-top: 22px"
              >
                <el-col
                  :span="8"
                  style="box-sizing: border-box; padding-left: 10px"
                  v-for="(item2, index2) in item"
                  :key="index2"
                >
                  {{ index2 == "0" ? item2.info : item2.info2 }}
                </el-col>
              </el-row>
              <el-row
                v-for="(item, index) in arr2arr(
                  details.zzcConfigDto.priceCalendarlist
                )"
                :key="index"
                style="margin-top: 22px"
              >
                <el-col
                  :span="8"
                  style="box-sizing: border-box; padding-left: 10px"
                  v-for="(item2, index2) in item"
                  :key="index2"
                >
                  {{
                    item2.priceType == 1
                      ? `周内：${item2.pricePerDay},周末：${item2.priceWeekend}`
                      : `${item2.priceName}：${item2.pricePerDay}元/天`
                  }}
                </el-col>
              </el-row>

              <!-- </div> -->
            </div>
          </el-card>
        </div>
      </div>
    </el-drawer>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="refresh"
    />
  </div>
</template>

<script>
import { list } from "@/api/ota/workOrder";

export default {
  data() {
    return {
      details: {
        car_name: "",
      },
      drawer: false,
      title: "",
      status: [
        { key: "1", label: "待执行", value: "1" },
        { key: "2", label: "已执行", value: "2" },
        { key: "3", label: "部分失败", value: "3" },
      ],
      total: 0,
      loading: false,
      list: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        carModelName: "",
        alltime: [],
        priceNo: "",
        alltime2: [],
      },
      ota_order_resource: [],
      order_atStatus: [],
    };
  },
  async created() {
    // const res = await list();
    // this.storeList = res.data;
    const table_name = await this.getDicts("ota_order_resource");
    this.ota_order_resource = table_name.data;
    const atStatus = await this.getDicts("order_atStatus");
    this.order_atStatus = atStatus.data;
    await this.getList(this);
  },

  methods: {
    arr2arr(list) {
      let one = [];
      let two = [];
      let three = [];
      list.forEach((ele) => {
        if (ele.priceType == 1) {
          let str = "";
          str = `周内：${ele.pricePerDay}元/天`;
          ele.info = str;
          one.push(ele);
          str = `周末：${ele.priceWeekend}元/天`;
          ele.info2 = str;
          one.push(ele);
          console.log(one);
        }
        if (ele.priceType == 2) {
          two.push(ele);
        }
        if (ele.priceType == 3) {
          three.push(ele);
        }
      });
      return [two, three];
    },
    arr2arr2(list) {
      let one = [];
      let two = [];
      let three = [];
      list.forEach((ele) => {
        if (ele.priceType == 1) {
          let str = "";
          str = `周内：${ele.pricePerDay}元/天`;
          ele.info = str;
          one.push(ele);
          str = `周末：${ele.priceWeekend}元/天`;
          ele.info2 = str;
          one.push(ele);
          console.log(one);
        }
        if (ele.priceType == 2) {
          two.push(ele);
        }
        if (ele.priceType == 3) {
          three.push(ele);
        }
      });
      return [one];
    },
    handleClose() {
      this.drawer = false
    },
    showPrice(row) {
      console.log(row);
      this.details.xcConfigDto = row.xcConfigDto;
      this.details.xcStatus = row.xcStatus;

      this.details.zzcConfigDto = row.zzcConfigDto;
      this.details.zzcStatus = row.zzcStatus;

      this.details.wkConfigDto = row.wkConfigDto;
      this.details.wkStatus = row.wkStatus;

      this.details.hlConfigDto = row.hlConfigDto;
      this.details.hlStatus = row.hlStatus;

      this.details.fzConfigDto = row.fzConfigDto;
      this.details.fzStatus = row.fzStatus;

      this.details.atConfigDto = row.atConfigDto;
      this.details.atStatus = row.atStatus;
      this.details.car_name = row.carModelName;
      this.details.no = row.priceNo
      this.details.status = row.workStatus
      // alert(this.details.status)
      this.drawer = true;
      // alert(1)
    },
    price2text(list) {
      let one = "";
      let two = "";
      let three = "";
      list.forEach((ele) => {
        if (ele.priceType == 1) {
          one += `周内：${ele.pricePerDay},周末：${ele.priceWeekend},`;
        }
        if (ele.priceType == 2) {
          two += `${ele.priceName}：${ele.pricePerDay},`;
        }
        if (ele.priceType == 3) {
          three += `${ele.priceName}：${ele.pricePerDay},`;
        }
      });
      return [one, two, three];
    },
    reset() {
      for (let key in this.queryParams) {
        this.queryParams[key] = "";
      }
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      };
      this.getList();
    },
    search() {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      // console.log(this.queryParams);
      this.getList();
    },
    status2text(status) {
      if (status == 5) {
        return "-";
      }
      return this.order_atStatus.find((ele) => {
        return ele.dictValue == status;
      }).dictLabel;
    },
    async refresh(query) {
      console.log(query);
      await this.getList();
    },
    add() {
      this.$router.push("/tenantCenter/ota/OTAPriceUpdateList/add");
    },
    async getList() {
      this.loading = true;
      try {
        if (this.queryParams.alltime != null) {
          this.queryParams.startStartTime = this.queryParams.alltime[0];
          this.queryParams.startEndTime = this.queryParams.alltime[1];
        } else {
          this.queryParams.startStartTime = "";
          this.queryParams.startEndTime = "";
        }
        if (this.queryParams.alltime2 != null) {
          this.queryParams.endStartTime = this.queryParams.alltime2[0];
          this.queryParams.endEndTime = this.queryParams.alltime2[1];
        } else {
          this.queryParams.endStartTime = "";
          this.queryParams.endEndTime = "";
        }
        const res = await list(this.queryParams);
        this.list = res.rows;
        this.total = res.total;
        this.loading = false;
      } catch (error) {
        this.loading = false;
      }
    },

    cancel() {
      this.$emit("cancel");
    },
  },
};
</script>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
}

.bottom-layout {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 30px 0 0;
}
.table-box {
  box-sizing: border-box;
  padding: 14px;
  background: #fff;
}
.el-table {
  margin-top: 12px;
}
.car_name {
  box-sizing: border-box;
  padding-left: 20px;
}
.drawer-box {
}
.text {
  font-size: 14px;
}

.item {
  /* margin-bottom: 18px; */
  /* display: flex;
  flex-wrap: wrap; */
}
.item > div {
  /* margin-bottom: 12px; */
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
</style>